<template>
  <div>
    <div class="cream">
      <div class="cream1">
        <img :src="creamsrc">
      </div>
      <div class="cream2">
        <div class="show">SHOW IT</div>
        <div class="tele">television course</div>
      </div>
    </div>

    <div class="main" id="main">
      <mt-swipe :auto="6000">
        <mt-swipe-item>
          <div class="lb1 lb11">
            <img @click="animal" src="static/images/index-img/movie1.png">
            <div class="descr">Fox</div>
            <div class="title">Warm man</div>
            <div class="text">Don not sad</div>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="lb1 lb11">
            <img @click="animal" src="static/images/index-img/movie2.png">
            <div class="descr">Zootopia</div>
            <div class="title">Clawhauer</div>
            <div class="text">I got a case</div>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="lb1">
            <img @click="wn" src="static/images/index-img/movie3.jpg">
            <div class="descr">Children</div>
            <div class="title">Happy</div>
            <div class="text">I got a happy</div>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="lb1">
            <img @click="wn" src="static/images/index-img/movie4.jpg">
            <div class="descr">Hunter</div>
            <div class="title">Together</div>
            <div class="text">Run and go</div>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="lb1">
            <img @click="dragon" src="static/images/index-img/movie5.jpg">
            <div class="descr">Dragon</div>
            <div class="title">Happy</div>
            <div class="text">I got a happy</div>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="lb1">
            <img @click="dragon" src="static/images/index-img/movie6.jpg">
            <div class="descr">Hotel</div>
            <div class="title">Adam</div>
            <div class="text">Sandler is dracula</div>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
      <!--<div class="circleall">-->
        <!--<div @click="click2" class="circle circle1"></div>-->
        <!--<div @click="click" class="circle"></div>-->
        <!--<div @click="click1" class="circle"></div>-->
      <!--</div>-->
    <div class="section">
      <div class="lb1 sec1">
        <img @click="intokongfu" src="static/images/index-img/movie8.png">
        <div class="heart2">
          <img src="static/images/index-img/heart2.png">
        </div>
        <div class="descr">KunfuPander</div>
        <div class="title">Panda kung fu</div>
        <div class="text">I love kung fu so much</div>
      </div>
      <div class="lb1 sec2">
        <img @click="intokongfu" src="static/images/index-img/movie9.png">
        <div class="heart2">
          <img src="static/images/index-img/heart2.png">
        </div>
        <div class="descr">Kung</div>
        <div class="title">Panda</div>
        <div class="text">Friendship</div>
      </div>
    </div>
    <div class="footer">
      <div @click="click3" class="footer1">
        <div class="flow"></div>
        <div class="footerimgdiv"><img src="static/images/index-img/heart1.png"></div>
      </div>
      <div @click="click4" class="footer2">
        <div class="flow"></div>
        <div class="footerimgdiv"><img src="static/images/index-img/heart1.png"></div>
      </div>
    </div>
  </div>
</template>

<script>
    import $ from "jquery"
    import { Swipe, SwipeItem } from 'mint-ui';
    export default {
      name:'movie',
      data: function(){
        return{
          creamsrc:"",
          $:$,
          isClick1:false,
          isClick2:false
        }
      },
      components:{
        Swipe:Swipe,
        SwipeItem:SwipeItem
      },
      mounted:function(){
        for(let i=0;i<$(".heart2").length;i++){
          $(".heart2").get(i).isClick=false;
        }
        $(".heart2").click(function(){
          if(this.isClick){
            $(this).find("img").attr("src","static/images/index-img/heart2.png");
            this.isClick=false;
          }else{
            $(this).find("img").attr("src","static/images/index-img/heart1.png");
            this.isClick=true;
          }

        });
        this.$http.get("static/index.json").then(function(res){
          this.creamsrc=res.data.creamsrc;
        },function(){})
      },
      methods:{
        intokongfu:function(){
          window.location.href="http://www.le.com/ptv/vplay/1356294.html"
        },
        animal:function(){
          window.location.href="http://www.le.com/ptv/vplay/24772145.html?ch=sohu_v"
        },
        wn:function(){
          window.location.href="http://vod.kankan.com/v/69/69654.shtml?id=751033"
        },
        dragon:function(){
          window.location.href="http://www.le.com/ptv/vplay/21105733.html?ch=sohu_v"
        },
        alice:function(){
          window.location.href="http://www.le.com/ptv/vplay/21288809.html?ch=baiduald_ffdy"
        },
        click:function(){
          $("#lb").css("margin-left","-100%");
          $(".circle").eq(1).css("background-color","#6EDF9F");
          $(".circle").eq(0).css("background-color","#B2B6B5");
          $(".circle").eq(2).css("background-color","#B2B6B5");
          console.log(this)
        },
        click1:function(){
          $("#lb").css("margin-left","-199%");
          $(".circle").eq(2).css("background-color","#6EDF9F");
          $(".circle").eq(1).css("background-color","#B2B6B5");
          $(".circle").eq(0).css("background-color","#B2B6B5")
        },
        click2:function(){
          $("#lb").css("margin-left","0");
          $(".circle").eq(0).css("background-color","#6EDF9F");
          $(".circle").eq(1).css("background-color","#B2B6B5");
          $(".circle").eq(2).css("background-color","#B2B6B5")
        },
        click3:function(){
          if(this.isClick1){
            $(".flow").eq(0).css("opacity","0");
            $(".footerimgdiv").eq(0).css("opacity","0");
            this.isClick1=false;
          }else{
            $(".flow").eq(0).css("opacity","1");
            $(".footerimgdiv").eq(0).css("opacity","1");
            this.isClick1=true;
          }

        },
        click4:function(){
          if(this.isClick2) {
            $(".flow").eq(1).css("opacity", "0");
            $(".footerimgdiv").eq(1).css("opacity", "0");
            this.isClick2=false;
          }else{
            $(".flow").eq(1).css("opacity", "1");
            $(".footerimgdiv").eq(1).css("opacity", "1");
            this.isClick2=true;
          }
        }
      }
    }
</script>

<style scoped>
  .cream{
    height: 50px;
    display: flex;
    /*border: 1px solid red;*/
  }
  .cream1{
    margin-top: 15px;
    margin-left: 4%;
  }
  .cream1 img{
    width: 40px;
  }
  .cream2{
    margin-left: 2%;
  }
  .show{
    font-size: 14px;
    color: #71E2A4;
    margin-top: 15px;
  }
  .tele{
    font-size: 12px;
    color: #C2F4DB;
  }
  .main{
    position: relative;
    overflow: hidden;
    height: 250px;
    margin-top: 10px;
  }
  /*#lb{*/
    /*height: 520px;*/
    /*width: 300%;*/
    /*display: flex;*/
    /*-webkit-transition: all .5s linear;*/
  /*}*/
  .lb1{
    position: relative;
    border: 1px solid #F0EFED;
    width: 90%;
    height: 200px;
    margin: 0 auto;
    box-shadow: 5px 5px 5px #F0EFED;
  }
  .lb1>img{
    width: 100%;
    height: 150px;
  }
  /*小圆点*/
  .mint-swipe-indicator{
    /*background-color: #6FE3A2 !important;*/
    /*opacity: 1;*/
  }
 .mint-swipe-indicators .is-active{
    background-color: #6FE3A2 !important;
  }
  .descr{
    position: absolute;
    left: 0;
    bottom: 50px;
    height: 20px;
    color: white;
    font-size:14px;
    text-align: center;
    line-height: 20px;
    padding: 0 10px;
    background-color: #6FE3A2;
  }
  .title{
    color: #555054;
    font-size: 16px;
    margin-left: 2%;
    font-weight: bolder;
    margin-top: 5px;
  }
  .text{
    color: #B8B8B8;
    font-size: 14px;
    margin-left: 2%;
  }
  .circle{
    width: 15px;
    height: 15px;
    border-radius: 10px;
    margin-left: 15%;
    background-color: #B2B6B5;
  }
  .circle1{
    background-color: #6EDF9F;
  }
  .circleall{
    position: absolute;
    left: 46%;
    bottom: 10px;
    display: flex;
    width: 10%;
  }
  .section{
    display: flex;
    margin-top: 10px;
    /*height: 500px;*/
  }
  .sec1{
    width: 65%;
  }
  .sec2{
    width: 30%;
  }
  .heart2{
    width: 20px;
    position: absolute;
    right: 1%;
    bottom: 50px;
  }
  .heart2 img{
    width: 100%;
  }
  .footer{
    display: flex;
    height: 100px;
    margin-top: 20px;
  }
  .footer1{
    margin-left: 3%;
    position: relative;
    background-image: url("../../static/images/index-img/movie7.png");
    background-size: cover;
    background-position:50% ;
    width: 45%;
    height: 100px;
    border: 1px solid #F0EFED;
    box-shadow: 5px 5px 5px #F0EFED;
  }
  .footer2{
    margin-left: 3%;
    position: relative;
    background-image: url("../../static/images/index-img/movie10.png");
    background-size: cover;
    background-position:50% ;
    width: 45%;
    height: 100px;
    border: 1px solid #F0EFED;
    box-shadow: 5px 5px 5px #F0EFED;
  }
  .footerimgdiv{
    -webkit-transition: all .3s linear;
    width: 30px;
    height: 30px;
    border-radius:30px;
    background-color: white;
    position: absolute;
    left: 39%;
    top: 35px;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .footerimgdiv>img{
    width: 40%;
    height: 40%;
  }
  .flow{
    -webkit-transition: all .3s linear;
    width: 100%;
    height: 100px;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
  }
</style>
